<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
		<meta name="format-detection" content="telephone=no" />
		<link rel="stylesheet" href="../css/index-a258220039.min.css" media="screen" charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../css/iconfont/iconfont.css" />
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style type="text/css">
			.hide{
				display: none;
			}
		</style>
	</head>

	<body style="background-color: #fff">
		<script type="text/javascript">
			! function(e, t) {
				var n = e.documentElement,
					i = "orientationchange" in window ? "orientationchange" : "resize",
					d = (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream, function() {
						var t = n.clientWidth;
						t && (t >= 750 ? (t = 750, e.body.style.width = "750px") : e.body.style.width = t + "px", n.style.fontSize = 100 * (t / 750) + "px", n.dataset.width = t, n.dataset.percent = 100 * (t / 750))
					});
				d(), e.documentElement.classList.add("iosx" + t.devicePixelRatio), e.addEventListener && t.addEventListener(i, d, !1)
			}(document, window)
		</script>
		<div id="content"></div>
	</body>

	<style type="text/css">
		.toFlip {
			display: none;
		}
		
		.txt img {
			width: 100%;
		}
	</style>
	<script id="chapter_tem" type="text/html">
		<div class="bookChapter">
			<div class="direct">
				<div class="fixed_wpr">
					<div class="wpr flex">
						<span><img src="../icon/directory.png" style="width:.28rem;" alt="" />目录</span>
						<em>{{chapterIndex+1}}/{{chaptercount}}</em>
					</div>
				</div>
				<div class="lists" id="listScroll">
					<div class="list_wpr box bg-f" style="min-height: 100%;">
						<ul>
							{{each data}}
							<li data-readable="true" class="slideMenu">
								<a href="javascript:void(0)"><span style="width: 80%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{$value.chapternumber}} {{$value.chaptername}}</span></a>
							</li>
							{{/each}}
						</ul>
					</div>
				</div>
			</div>
			{{each data}} {{if $index==chapterIndex}}
			<div class="det">
				<h4>{{$value.chapternumber}} {{$value.chaptername}}</h4>
				<div class="aud_m">
					<div class="wpr">
						<b style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{$value.chapternumber}} {{$value.chaptername}}</b>
						<div class="author">主播：{{$value.videoauthor}}</div>
						<div class="player table">
							<div class="left">
								<span id="play" class="toPlay"></span>
							</div>
							<div class="right clearfix">
								<div class="line" id="box"><em id="strip"></em><var id="circel"></var></div>
								<span class="f-l">00:00</span><span class="f-r">00:00</span>
							</div>
						</div>
						<audio preload="auto" id="audio" style="display:none;">
							<source src="{{$value.chaptervideo | addUrl}}">
						</audio>
					</div>
				</div>
				<div class="txt">
					{{@$value.content}}
				</div>
			</div>
			{{/if}} {{temp}} {{/each}}

		</div>

		<!-- 翻页 -->
		<div class="toFlip" style="display: block;">
			<div id="nextChap" class="wpr flex">
				{{if chapterIndex!==0}}
				<a id="prev" style="padding: .2rem;" onclick="changeIndex(-1)" href="javascript:void(0)">上一节</a>
				{{else if chapterIndex==0}}
				<a id="prev" style="padding: .2rem;" href="javascript:void(0)"></a>
				{{/if}} {{if chapterIndex!==chaptercount-1}}
				<a id="next" style="padding: .2rem;" onclick="changeIndex(1)" href="javascript:void(0)">下一节</a>
				{{/if}}
			</div>
		</div>
	</script>

	<script src="../js/art-template.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/md5.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/wechat_common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/purl.js"></script>
	<script type="text/javascript">
		var unionid=GetQueryString('unionid');
	if (!unionid) {
		unionid="";
	}
		var bookId = GetQueryString('bookid');
		var chapterIndex = GetQueryString('chapterIndex');
		var audioIndex;
		var currentTime;
		var duration;
		if (window.localStorage) {
			audioIndex = localStorage.getItem(bookId);
			if (audioIndex) {
				var value = localStorage.getItem(bookId + "_" + audioIndex);
			    if (value) {
			    	   var timeArr = value.split("_");
			    	   if (timeArr.length == 2) {
			    	   	currentTime = parseInt(timeArr[0]);
			        duration = parseInt(timeArr[1]);
			        if (currentTime >= duration ) {
				       currentTime = 0;
			        }
			    	   }
			    }
			}
		}
		
		if (audioIndex && !chapterIndex) {
			chapterIndex = audioIndex;
		}
		if (!chapterIndex) {
			chapterIndex = 0;
		}
		chapterIndex = parseInt(chapterIndex);
		var book;
		var totalChapterCount;
		//设置导入模板变变量
		template.defaults.imports.chapterIndex = chapterIndex;
		
		template.defaults.imports.addUrl = function(value) {
			return imgHosturl + value
		};
		template.defaults.imports.totalReadCount = function(value) {
			value = value.toString();
			if(value.length <= 4) {
				return value;
			} else {
				value = value / 10000;
				return value = value.toFixed(1) + "万"
			}
		};
		
		function ascli(url) {
			var param = url.split("?")[1].split("&");
			param.sort();
			str = param.join("&") + "&key=wwdxreaderwhat0823";
			return url + "&sign=" + hex_md5(str).toUpperCase();
		}

		function render(data) {
			var html = template("chapter_tem", data);
			document.getElementById('content').innerHTML = html;
			$('body').animate({
				scrollTop: 0
			}, 300)

		};

		function afterAjax() {
			// 目录slide
			$('.direct .wpr').on('click', function() {
				if (totalChapterCount < 12) {
					//禁止滑动
			        document.body.style.overflow = 'hidden';
			        window.addEventListener('touchmove',_preventDefault);
				}
				$('.direct .lists').fadeIn(100, function() {
					$('.direct .list_wpr').addClass('animate');
				});
			})

			$('.direct .lists').click(function() {
				//恢复滑动效果
			    document.body.style.overflow = 'auto';
			    window.removeEventListener('touchmove', _preventDefault);
				$(this).fadeOut(100, function() {
					$('.direct .list_wpr').removeClass('animate');
				});
			})
			
			function _preventDefault(e){
                e.preventDefault();
	        }
			
			// 音乐
			$(function() {
				var oAudio = document.querySelector('#audio');
				var oDiv1 = document.querySelector('#box');
				var oDiv2 = document.querySelector('#strip');
				var oDiv3 = document.querySelector('#circel');
				var oPlay = document.querySelector('#play');
				var timer = '';
				oAudio.addEventListener("loadedmetadata", function() {
					$('.player .right .f-r').text(formatSeconds(oAudio.duration))
					$('.player .right .f-l').text("00:00")
				})
				oAudio.addEventListener("ended", function() {
					if (chapterIndex < totalChapterCount - 1) {
						changeIndex(1);
					}
				})
				wx.ready(function() {
					//			oAudio.autoplay = "autoplay";
					oAudio.load();
					//			oAudio.play();
					//        	oAudio.addEventListener("canplay",function(){
					//        			oAudio.play();
					//        	})
				});

				function currentAndTotal(x) {
					var arr = x.split('*');
					return arr;
				}
				
				oPlay.onclick = function() {
						if(oAudio.paused) {
							oAudio.play();
							$(oPlay).removeClass('toPlay').addClass('toPause')
							timer = setInterval(function() {
								if(oAudio.paused) {
									clearInterval(timer)
									$(oPlay).removeClass('toPause').addClass('toPlay');
									clearInterval(timer)
								}
								playAudio(oAudio.currentTime / oAudio.duration)
								// vm.voteTime = oAudio.duration-oAudio.currentTime;
								if (window.localStorage) {
									localStorage.setItem(bookId,chapterIndex);
									var key = bookId + "_" + chapterIndex;
									var value = parseInt(oAudio.currentTime) + "_" + parseInt(oAudio.duration);
									localStorage.setItem(key,value);
								}
								$('.player .right .f-l').text(formatSeconds(oAudio.currentTime))
							}, 1000)
						} else {
							oAudio.pause();
							$(oPlay).removeClass('toPause').addClass('toPlay');
							clearInterval(timer)
						}
				}
				
				setTimeout(function(){
					 if (chapterIndex == audioIndex) {
						  oAudio.currentTime = currentTime;
					 }
					oPlay.click();
				 },1500)
				
				setTimeout(function(){
					if (oAudio.paused) {
						if (chapterIndex == audioIndex) {
						  oAudio.currentTime = currentTime;
					    }
					   oPlay.click();
					}
				 },2500)

				function playAudio(iNow) {
					oDiv2.style.width = iNow * 100 + '%';
					oDiv3.style.left = iNow * 100 + '%';
				}

				oDiv3.addEventListener('touchstart', function(ev) {
					clearInterval(timer)
					var oDiv1W = oDiv1.offsetWidth;
					var oldX = ev.targetTouches[0].clientX - oDiv3.offsetLeft;

					document.addEventListener('touchmove', fnMove, false)
					document.addEventListener('touchend', fnEnd, false)

					function fnMove(ev) {

						var x = ev.targetTouches[0].clientX - oldX;
						if(x >= oDiv1W) {
							x = oDiv1W;
						} else if(x <= 0) {
							x = 0;
						}
						oDiv3.style.left = x + 'px';
						oDiv2.style.width = x + 'px';

					}

					function fnEnd(ev) {
						document.removeEventListener('touchend', fnEnd, false)
						document.removeEventListener('touchmove', fnMove, false)
						var newX = ev.changedTouches[0].clientX;
						var oDiv2W = oDiv2.offsetWidth;
						var oDuration = oDiv2W / oDiv1W;
						clearInterval(timer)

						oAudio.currentTime = oDuration * oAudio.duration;
						timer = setInterval(function() {
							if(oAudio.paused) {
								clearInterval(timer)
								$(oPlay).removeClass('toPause').addClass('toPlay');
								clearInterval(timer)
							}
							if (window.localStorage) {
								localStorage.setItem(bookId,chapterIndex);
								var key = bookId + "_" + chapterIndex;
								var value = parseInt(oAudio.currentTime) + "_" + parseInt(oAudio.duration);
								localStorage.setItem(key,value);
							}
							playAudio(oAudio.currentTime / oAudio.duration)
							$('.player .right .f-l').text(formatSeconds(oAudio.currentTime))
						}, 1000)

					}
				}, false);

				$(".slideMenu").click(function() {
					if($(this).attr('data-readable') == "true") {
						template.defaults.imports.chapterIndex = $(this).index();
						chapterIndex = $(this).index();
						render(book);
						afterAjax();
					}
				})
			})
			
			//  滑动效果
			//

			$(window).scroll(function() {
				var txt = $('.bookChapter .det .txt'),
					fixed_wpr = $('.bookChapter .direct .fixed_wpr')
				if($('body').scrollTop() >= txt.offset().top - 80) {
					fixed_wpr.addClass('show');
				} else {
					fixed_wpr.removeClass('show');
				}

				if($('body').scrollTop() + $(window).height() >= $('body').height() - 80) {
					$('.toFlip').fadeIn()
				} else {
					$('.toFlip').fadeOut()
				}

			})
		}
		
		$(function() {
			function after() {
				var reqUrl= ascli(hostUrl + "bookchapter/list?unionid=" + unionid + "&bookid=" + bookId);
				$.ajax({
					type: "get",
					url: reqUrl,
					async: true,
					success: function(data) {
						
						book = data;
						totalChapterCount = data.data.length;
						if (window.localStorage) {
							localStorage.setItem(bookId + "_count",totalChapterCount);
						}
						data.chaptercount=totalChapterCount;
						render(data);
						afterAjax();
					}
				});
			}
			after();
		})

		function changeIndex(x) {
			chapterIndex += x;

			if(chapterIndex < 0) {
				chapterIndex = 0;
			}
			if(chapterIndex > totalChapterCount - 1) {
				chapterIndex = totalChapterCount - 1
			}
			template.defaults.imports.chapterIndex = chapterIndex;
			render(book);
			afterAjax();
		}

		function formatSeconds(a) {
			var hh = parseInt(a / 3600);
			if(hh > 0 && hh < 10) {
				hh = "0" + hh;
			} else {
				hh = '';
			}
			var mm = parseInt((a - hh * 3600) / 60);
			if(mm < 10) mm = "0" + mm;
			var ss = parseInt((a - hh * 3600) % 60);
			if(ss < 10) ss = "0" + ss;
			var length = hh.length ? (hh + ":" + mm + ":" + ss) : mm + ":" + ss;
			if(a > 0) {
				return length;
			} else {
				return "00:00";
			}
		}
		 var isPageHide = false;
        window.addEventListener('pageshow', function () {
            if (isPageHide) {
              location.reload()
            }
        });
        window.addEventListener('pagehide', function () {
            isPageHide = true;
        });
	
	</script>

</html>